<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>

    <% include ../../common.ejs %>
    <link rel="stylesheet" type="text/css" href="../../stylesheets/xcConfirm.css"/>
    <script src="../../javascripts/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .font_red {
            color: red;
            size: 2pt;
        }

        .font_green {
            color: green;
            size: 2pt;
        }
    </style>
    <script>
        function clearTip() {
            $("#tip1").empty();
            $("#tip2").empty();
            $("#tip3").empty();
        }

        var checkOldPassword = function () {
            if ($("#oldpassword").val() == "") {
                $("#tip1").empty();
                return false;
            }else {
                var tag=true;
                $.ajax({
                    type: 'post',
                    async:false,//同步提交
                    url: "/customer/personalSetting/checkPassword",
                    data: {param: $("#oldpassword").val()},
                    success: function (e) {
                        if (e.code == 200) {
                            $("#tip1").html("<span class='font_green'>正确</span>");
                        }
                        else {
                            $("#tip1").html("<span class='font_red'>错误</span>");
                            tag=false;
                        }
                    }
                });
                if(tag==false) {
                    return false;
                }
            }
        }

        var checkNewPassword1 = function(){
            var num=$("#password1").val().length;
            if(num!=0) {
                if (num < 6) {
                    $("#tip2").html("<span class='font_red'>不少于6个字符</span>");
                    return false;
                }
                else if (num > 18) {
                    $("#tip2").html("<span class='font_red'>不大于18个字符</span>");
                    return false;
                }
                else {
                    $("#tip2").html("<span class='font_green'>可以</span>");
                }
            }
            else{
                //$("#tip2").html("<span class='font_red'>内容不能为空</span>");
                $("#tip2").empty();
                return false;
            }
        }

        var checkNewPassword2 = function(){
            var tmp=$("#password1").val();
            var num=$("#password2").val().length;
            if(num!=0) {
                if ($("#password2").val() != tmp) {
                    $("#tip3").html("<span class='font_red'>两次密码不相同</span>");
                    return false;
                }
                else {
                    if (num >= 6 && num <= 18) {
                        $("#tip3").html("<span class='font_green'>正确</span>");
                    }
                    else {
                        $("#tip3").html("<span class='font_red'>内容应在6-18个字符之间</span>");
                        return false;
                    }
                }
            }
            else{
                //$("#tip3").html("<span class='font_red'>内容不能为空</span>");
                $("#tip3").empty();
                return false;
            }
        }

        var checkAll = function () {
            if (checkOldPassword() == false) {
                return false;
            }
            if (checkNewPassword1()==false){
                return false;
            }
            if(checkNewPassword2()==false){
                return false;
            }
        }
        function submitForm() {
            if (checkAll() == false) {
                return false;
            }
        }

        function alertSuccess(){
            var txt=  "修改成功";
            window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success);
        };

        function alertFail(){
            var txt=  "抱歉，服务器繁忙！";
            window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error);
        }
    </script>

</head>
<body>
<div id="top">
    <% include ../top.ejs %>
</div>
<div></div>
<div class="container-fluid" style="margin-top: 20px;">
    <div class="row">
        <div class="col-md-1">
        </div>
        <div id="left" class="col-md-2">
            <% include ../left.ejs %>
        </div>
        <div class="col-md-8 bodyDiv"  id="right">
            <div class="row">
                <div class="col-md-6">
                        <span class="headTitle" >修改密码</span>
                </div>
            </div>
            <form method="post" action="/customer/personalSetting/updatePassword" onsubmit="return checkAll()">
                <div class="row">
                    <div class="form-group">
                        <div class="row" style="padding-top: 40px;">
                            <div class="col-md-2"></div>
                            <div class="col-md-3">
                                <span class="pull-right" style="font-size: 20px;">原始密码:</span>
                            </div>
                            <div class="col-md-3">
                                <input type="password" id="oldpassword" name="oldpassword" class="form-control"
                                       onblur="checkOldPassword()" placeholder="必填">
                            </div>
                            <div class="col-md-4" id="tip1"></div>
                        </div>

                        <div class="row" style="padding-top: 40px;">
                            <div class="col-md-2"></div>
                            <div class="col-md-3">
                                <span class="pull-right" style="font-size: 20px;">新密码:</span>
                            </div>
                            <div class="col-md-3">
                                <input type="password" id="password1" name="password1" class="form-control"
                                       onblur="checkNewPassword1()" placeholder="必填">
                            </div>
                            <div class="col-md-4" id="tip2"></div>
                        </div>

                        <div class="row" style="padding-top: 40px;">
                            <div class="col-md-2"></div>
                            <div class="col-md-3">
                                <span class="pull-right" style="font-size: 20px;">确认密码:</span>
                            </div>
                            <div class="col-md-3">
                                <input type="password" id="password2" name="password2" class="form-control"
                                       onblur="checkNewPassword2()" placeholder="必填">
                            </div>
                            <div class="col-md-4" id="tip3"></div>
                        </div>

                        <div class="row" style="padding-top: 40px;">
                            <div class="col-md-4"></div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-default" style="width: 100%"
                                        onclick="submitForm()">确定</button>
                            </div>
                            <div class="col-md-2">
                                <button type="reset" class="btn btn-default" onclick="clearTip()" style="width: 100%">取消
                                </button>
                            </div>
                            <div class="col-md-3" id="tip4"></div>
                        </div>
                    </div>
                </div>
                <% if(r_code == 1){ %>
                <% } %>
                <% if(r_code != 1){ %>
                <% if(r_code == 200){ %>
                <script>
                    alertSuccess();
                    /*$("#tip4").show().html("<span class='font_green'>修改成功</span>");*/
                    $("#oldpassword").val("");
                    $("#password1").val("");
                    $("#password2").val("");
                    $("#tip1").empty();
                    $("#tip2").empty();
                    $("#tip3").empty();
                    //$("#tip4").delay(10000).hide(0);
                </script>
                <% } %>
                <% if(r_code == 0){ %>
                <script>
                    alertFail();
                    //$("#tip4").show().html("<span class='font_red'>修改失败，请注意提示信息</span>");
                </script>
                <% } %>
                <% } %>
            </form>
        </div>
        <!--内容-->
    </div>
    <div class="col-md-1">
    </div>
</div>


</body>
</html>